<template>
  <a-drawer :open="visible" :title="title" :width="1000" @close="handleClose" :destroyOnClose="true">
    <a-form :model="form" ref="formRef" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" layout="horizontal">
      <a-form-item label="标题" name="title" required>
        <a-input v-model:value="form.title" :disabled="isDetail" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="是否轮播" name="isCarousel" required>
        <a-select
          v-model:value="form.isCarousel"
          :disabled="isDetail"
          placeholder="请选择"
          :options="[
            { label: '是', value: '1' },
            { label: '否', value: '0' },
          ]"
        />
      </a-form-item>
      <a-form-item label="联系人" name="contactPerson">
        <a-input v-model:value="form.contactPerson" :disabled="isDetail" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="联系方式" name="contactInfo">
        <a-input v-model:value="form.contactInfo" :disabled="isDetail" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="所在地区" name="area">
        <AreaCascader v-model:value="form.area" :disabled="isDetail" />
      </a-form-item>
      <a-form-item label="详细地址" name="address">
        <a-textarea v-model:value="form.address" :disabled="isDetail" placeholder="请输入" :rows="4" />
      </a-form-item>
      <a-form-item label="图片" name="storeFileList">
        <SimpleImageUpload
          v-model="form.storeFileList"
          ref="characteristicsFileListRef"
          :maxCount="20"
          :disabled="isDetail"
          :upload-params="{ type: 'store_store' }"
        />
      </a-form-item>
      <a-form-item label="状态" name="status">
        <a-select v-model:value="form.status" :disabled="isDetail" placeholder="请选择" :options="statusOptions" />
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 4 }">
        <a-button style="margin-right: 16px" type="primary" @click="handleSubmit" :loading="loading" v-if="!isDetail">保存</a-button>
        <a-button @click="handleClose">取消</a-button>
      </a-form-item>
    </a-form>
  </a-drawer>
  <a-modal :open="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
    <img alt="example" style="width: 100%" :src="previewImage" />
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, defineProps, defineEmits, onMounted } from 'vue';
  import { message } from 'ant-design-vue';
  import { saveOrUpdate, getTextById } from './api';
  import { statusOptions } from './data';
  import SimpleImageUpload from '/@/components/SimpleImageUpload.vue';
  import AreaCascader from './AreaCascader.vue';

  defineOptions({
    name: 'YayuStoreAdd',
  });
  const previewVisible = ref(false);
  const previewImage = ref('');
  const previewTitle = ref('');

  const props = defineProps({
    id: {
      type: String,
      default: '',
    },
    visible: { type: Boolean, default: false },
    isDetail: { type: Boolean, default: false },
  });
  const title = ref('新增');
  const isUpdate = ref(false);
  const loading = ref(false);
  const characteristicsFileListRef = ref([]);

  onMounted(async () => {
    if (props.id) {
      isUpdate.value = true;
      title.value = props.isDetail ? '详情' : '编辑';
      const data = await getTextById({ id: props.id });
      form.value = data;
      characteristicsFileListRef.value.setFileList(data.storeFileList);
      form.value.area = data.area || '';
    }
  });
  const handleCancel = () => {
    previewVisible.value = false;
    previewTitle.value = '';
  };
  const emit = defineEmits(['update:visible', 'success']);

  const formRef = ref();

  const form = ref({
    contactPerson: '',
    title: '',
    contactInfo: '',
    isCarousel: '',
    subTitle: '',
    area: '',
    address: '',
    storeFileList: [],
    status: '1',
  });

  function handleSubmit() {
    loading.value = true;
    formRef.value
      .validate()
      .then(async () => {
        // 处理地区数据：如果保存时需要只保存最后一个（区代码），可以在这里转换
        const submitData = { ...form.value };
        if (submitData.area && Array.isArray(submitData.area) && submitData.area.length > 0) {
          // 如果需要只保存最后一个区代码，取消下面的注释
          // submitData.area = submitData.area[submitData.area.length - 1];
        }
        await saveOrUpdate(submitData, isUpdate.value);
        message.success(isUpdate.value ? '编辑成功' : '新增成功');
        emit('success');
        emit('update:visible', false);
      })
      .finally(() => {
        loading.value = false;
      });
  }

  function handleClose() {
    emit('update:visible', false);
  }
</script>

<style scoped>
  .upload-tip {
    color: #888;
    font-size: 12px;
    margin-top: 4px;
  }
</style>
